<template>
    <div class="main">
    <!--操作栏  -->
    <div class="nav clear">
        <div class="btn">
            <el-row>
            <el-button type="primary" icon="el-icon-paperclip" @click="fenPei()">分配</el-button>
            <el-button type="success" icon="el-icon-document-delete" @click="daochu()">导出</el-button>
            </el-row>
        </div>
        <div class="search">
            <el-input v-model="search" placeholder="请输入内容"></el-input>
            <el-button class="el-icon-search" @click="moHuSearch()"></el-button>
        </div>
    </div>
    <!-- 表格 -->
    <div>
        <template>
            <el-table tooltip-effect="dark" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="80">
                </el-table-column>
                <el-table-column
                prop="username"
                label="患者名称"
                width="100">
                </el-table-column>
                <el-table-column
                prop="sex"
                label="性别"
                width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sex == 1">男</span>
                        <span v-if="scope.row.sex == 2">女</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="age"
                label="年龄"
                width="80">
                </el-table-column>
                <el-table-column
                prop="phoneNumber"
                label="手机号码"
                width="120">
                </el-table-column>
                <el-table-column
                prop="customerCard"
                label="身份证号"
                width="160">
                </el-table-column>
                <el-table-column
                prop="medicalInsurance"
                label="医保卡号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="customerLocation.province"
                label="省"
                width="120">
                </el-table-column>
                <el-table-column prop="customerLocation.city" label="市" width="80">
                </el-table-column>
                <el-table-column prop="customerLocation.area" label="区" width="80">
                </el-table-column>
                <el-table-column
                prop="customerLocation.address"
                label="详细地址"
                width="250">
                </el-table-column>
                <el-table-column
                prop="employee.realName"
                label="负责人"
                width="80">
                </el-table-column>
                <el-table-column
                prop="createTime"
                label="创建时间"
                width="150">
                    <template slot-scope="scope">{{ scope.row.createTime | dateFormat}}</template>
                </el-table-column>
                <el-table-column
                prop="statusCustomer.title"
                label="状态"
                width="100">
                </el-table-column>
                <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-s-home" @click="open(scope)">领取</el-button>
                </template>   
                </el-table-column>
            </el-table>
        </template> 
    </div>
    <!-- 页码内容 -->
    <div class="pages clear">
        <div class="leftPage">
            <span>共 <b>{{maxCount}}</b> 条 | 每页 <b>5</b> 条 | 共 <b>{{maxPage}}</b> 页</span>
        </div>
        <div class="rightPage">
            <el-pagination
            background
            layout="prev, pager, next"
            :page-count='maxPage'
            :current-page='nowPage'
            @current-change='changePage'>
            </el-pagination>
        </div>
    </div>
    <!-- 分配的弹框 -->
    <div class="transferForm">
        <el-dialog :visible.sync="dialogFormVisible2" width="40%">
        <el-form :model="transferForm">
            <el-form-item label="部门" :label-width="formLabelWidth">
            <el-select v-model="transferForm.title" placeholder="请选择" @change='feiPei2'>
                <el-option v-for="item in this.department" :key="item.id" :label="item.title" :value='item.id'></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="人员" :label-width="formLabelWidth">
            <el-select v-model="transferForm.realName" placeholder="请选择" @change='feiPei3'>
                <el-option v-for="item in this.employee2" :key="item.id" :label="item.realName" :value="item.id"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="fenPeiSubmit">确 定</el-button>
        </div>
        </el-dialog>
    </div>
    </div>
</template>
<script>
import {initPatientsHighSeaTable,daoChu,initPatientsHighSeaTableBuMen,initPatientsHighSeaTableRenYuan,fenPeiSub,gaoJiSearchSubmit} from '../utils/api/patientsHighSea'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
        search:'',
        formLabelWidth:'120px',
        input:'',
        // 表格渲染的模拟数据
        tableData: [],
        nowPage:1,//当前页
        maxPage:0,//最大页
        maxCount:0,//数据总条数
        //分配的弹框
        dialogFormVisible2:false,
        transferForm:{
            title:'',
            realName:''
        },
        department:[],
        employee2:[],
        multipleSelection: [],
        employeeId:'',
        obj:{
            limit:5,//每页显示几条数据
            page:1,//第几页
            types:'公海',
            status:null,
            username:null,
            customerPhoneNumber:null,
            customerCard:null,
            medicalInsurance:null,
            startTime:null,
            endTime:null,
            search:'',
            },
    }
    },
    methods:{
        // 获取患者公海信息的函数
         getAllPatientsHighSea(){
             initPatientsHighSeaTable(this.obj).then((data)=>{
                 console.log(data);
                  if(data.data.code==200){
                    this.tableData=data.data.data.customer;
                    this.maxCount=data.data.data.count;
                    this.maxPage=Math.ceil(data.data.data.count/this.obj.limit);
                    // console.log(this.maxPage);
                
                    this.nowPage=this.obj.page;
                    // console.log(this.nowPage);
                }
             })
         },
         // 当前页改变时触发的函数，例如：当点击第二页时，当前页的页码变为2
        changePage(num){ 
            this.nowPage=num;
            this.obj.page=this.nowPage;
            
            // console.log(this.obj);
            this.getAllPatientsHighSea()
        }, 
        // 点击模糊搜索的按钮，查询数据
        moHuSearch(){
            this.obj.search=this.search;
            gaoJiSearchSubmit(this.obj).then((data)=>{
                console.log(data);
                if(data.data.code==200){
                    this. getAllPatientsHighSea()
                }
            })
        },
        // 点击导出按钮
        daochu(){
            daoChu(this.obj).then((data)=>{
                console.log(data);
                this.download(data.data)
            })
        },
        // 将后台返回的乱码解析成文件下载
        download(data) {
        if (!data) {
        return;
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "患者公海报表.xlsx");

        document.body.appendChild(link);
        link.click();
        },
        // 分配的部门初始化
        fenPei(){
            this.dialogFormVisible2 = true;
            initPatientsHighSeaTableBuMen().then((data)=>{
                // console.log(data);
                this.department=data.data.data;
                // console.log(this.department);
            })
        },
        //分配的人员初始化
        feiPei2(value){
            console.log(value);
            this.deptId=value;
            this.transferForm.realName='';
            let obj={
                id:this.deptId
            };
            initPatientsHighSeaTableRenYuan(obj).then((data)=>{
                // console.log(data);
                this.employee2=data.data.data;
                console.log(this.employee2);
        })
        },
        //获取选中人员的id
        feiPei3(value2){
            // console.log(value2);
            this.employeeId=value2;
        },
        // 选中获取患者id
        handleSelectionChange(val) {
            for(let i = 0; i<val.length; i++){
               this.multipleSelection[i] = val[i].id;
            //    this.multipleSelection.push(val[i].id)
            }
            // console.log(this.multipleSelection);
        },
        // 分配弹框的确认按钮，提交到后台
        fenPeiSubmit(){
            let obj={
                customerId:this.multipleSelection,
                employeeId:this.employeeId,
            }
            fenPeiSub(obj).then((data)=>{
                // console.log(data);
                if(data.data.code==200){
                    this.getAllPatientsHighSea()
                }
            })
            this.dialogFormVisible2 = false;
        },
        //领取的确认弹框
        open(data) {
            // console.log(data.row);
            this.multipleSelection.push(data.row.id);
        this.$confirm('确定领取该患者吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj={
                customerId:this.multipleSelection,
                employeeId:1,
            };
            fenPeiSub(obj).then((data)=>{
                console.log(data);
                if(data.data.code==200){
                    this.getAllPatientsHighSea()
                    this.$message({
                        type: 'success',
                        message: '领取成功!'
                    });
                }
            })
            this.dialogFormVisible2 = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消领取'
          });          
        });
      }
    },
    created(){
        this.getAllPatientsHighSea()
    },
}
</script>
<style lang="less" scoped>
html,body{
    height: 100%;
}
.main{
    background-color: white;
    margin-top: 20px;
    .nav{
        padding:0 0 20px 0;
        .btn{
            float: left;
        }
        .search{
            float: right;
            .el-input{
                width: 200px;
            }
        }
    }
    .pages{
        background-color: #FAFAFA;
        padding: 20px;
        .leftPage{
            float: left;
        }
        .rightPage{
            float: right;
        }
    }
}
// 分配的弹框样式
.transferForm{
    .el-select{
        width:80%
    }
}
</style>